import React, { Component } from 'react';
import ReactDom from 'react-dom';
import { Layout } from 'antd';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import AppHeader from './components/Header/';
import Login from './components/Login/';
import List from './containers/List/';
import Detail from './containers/Detail/';
import Vip from './containers/Vip/';
import 'antd/dist/antd.css';
import './style.css';

const { Header, Footer, Content } = Layout;

class App extends Component {
	render() {
		return (
			<BrowserRouter>
				<Layout style={{ minWidth: 1260, height: '100%' }}>
			      <Header className="header">
			      	<AppHeader />
			      </Header>
			      <Content className="content">
			      	<Login />  {/*Login组件不在路由项内（即不在Route标签内），不能获取到路由相关的任何内容*/}
			      	<Switch> {/*前端路由中的选择器，用来匹配路径，匹配到前一个就不会再进行匹配（只能匹配一个），将/detail写在前面是因为路径匹配的原则是输入路径包含匹配路径就算匹配成功*/}
		      			<Route path='/vip' component={Vip} />
		      			<Route path='/detail/:id' component={Detail} />
		      			<Route path='/:id?' component={List} /> {/*将当前页面的路径中/后面的参数赋值给参数id，传给子组件List，？表示这个id参数可传可不传，如果id不传，在后台设置了默认显示id为1的列表*/}
			      	</Switch>
			      </Content>
			      <Footer className="footer">@copyright Dell-Lee 2018</Footer>
		    	</Layout>
	    	</BrowserRouter>
		)
	}
}


ReactDom.render(<App />, document.getElementById('root'));